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DRAW-BASED EDITOR FOR WEB PAGES 

FIELD OF THE INVENTION 

This application relates to the World Wide Web and, in particular, to a 
method and apparatus for easily generating web pages on a "What You See is 
What You Get" (WYSIWYG) basis. 
BACKGROUND OF THE IN VENTION 

The past several years have seen an explosive growth of the World Wide 
Web ("the Web"). The Web is built around a network of "server" computers, which 
exchange requests and data with each other using the hypertext transfer protocol 
("http"). A human designer designs the layout of a Web page, which is then 
specified using HTML ("Hypertext Markup Language"). Several versions of HTML 
are currently in existence. Examples include HTML versions 2.0 and 3.0, as 
specified by the WWW Consortium of MIT. Netscape Communications Corp. has 
specified additional HTML features that extend HTML forms and tables. 

A user views a Web page using one of a number of commercially available 
"browser" programs. The browser submits an appropriate http request to establish 
a communications link with a Web server of the network. A typical http request 
references a Web page by its unique Uniform Resource Locator ("URL"). A URL 
identifies the Web server hosting that Web page; so that an http request for access 
to the Web page can be routed to the appropriate Web server for handling. Web 
pages can also be linked graphically to each other. 

The HTML to describe a Web page is often created by hand by a human 
being. If the design of the page changes, the corresponding HTML must be 
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rewritten, which is an exacting process. Although several conventional HTML- 
editors exist, these editors only allow the user to specify certain elements of a page 
and frequently still require the user to physically enter HTML code. Conventional 
HTML editors allow the user to specify the pagejcontent and general layout, but do 
not provide the user with "What You See Is What You Get" (WYSIWYG) capability. 
Thus, the pages generated by conventional HTML editors look different when 
viewed by different browsers. 

A Web "site" consists of a "homepage" and several other related pages. 
Each page has corresponding HTML that describes the appearance and function 
of the page. For example, the HTML for the homepage usually contains links to 
one or more of the other pages and the other pages often contain respective links 
back to the homepage. When the user clicks on a link of the displayed homepage, 
the browser requests and displays the linked-to page. Each link must be designed 
and coded into the HTML for the pagfe. : Thus, for example, when a human 
designer decides to remove a link between . tfte homepage and another page, the 
HTML for the homepage must be changed to reflect the removed link. This 
process is exacting and requires that the user manually change the link. Moreover, 
if the linked-to page has another link back to the homepage, that link may also 
need to be changed. 

It is a common problem that not all browsers interpret HTML code in the 
same way. For example, some browsers will automatically center a page title, 
while others may left justify a page title. Similarly, horizontal and vertical spacing 
may vary between browsers made by different companies. 

It is usually desirable to have a consistent style for all pages of a site. 
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When the user hand codes the HTML for each page of a site, it is difficult for the 
user to remember to use a consistent style. In addition, if the user decides to 
change the style of a site, each page must be changed individually. 
SUMMARY OF THE INVENTION 

The present invention overcomes the problems and disadvantages of the 
prior art by using a drag and drop interface to allow a user to easily design a Web 
page. The user moves display elements to define the appearance of a web page. 
When the user clicks/selects a "publish" button, HTML code is automatically 
generated. A preferred embodiment of the invention generates an HTML table in 
accordance with the display elements. The "number and size of cells in the HTML 
table reflects the number and placement of display elements on the page, yielding 
a true WYSIWYG Web page. Because the generated HTML code is in the form of 
a table, the HTML will cause most browsers to display a page that has substantially 
the same layout, proportionality, coloring, and spacing as the layout of the page 
displayed by the page draw editor software. 

Initially, the present invention automatically generates a layout that is used 
for each page unless overridden by the user: Each page is initially generated in 
accordance with "style" parameters chosen, by the user. 

In accordance with the purpose of the invention, as embodied and broadly 
described herein the invention is a method of allowing a user to define a World 
Wide Web page comprising the steps, performed by a data processing system, of: 
displaying a plurality of page display elements on a display device, the display 
elements forming a page layout on the display device; receiving an indication that 
the user wants to add a new display element to the page at a first position on the 
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page; adding a new draw data structure in a memory of the data processing- 
system for the new display element to a plurality of other draw data structures, the 
draw data structures corresponding to the plurality of page display elements, where 
the new draw data structure includes data representing the first position; and 
generating HTML that substantially reflects the displayed page layout on a pixel by 
pixel basis in accordance with the draw data structures. 

Advantages of the invention will be set forth in part in the description which 
follows and in part will be obvious from the description or may be learned by 
practice of the invention. The advantages of the invention will be realized and 
attained by means of the elements and combinations particularly pointed out in the 
appended claims and equivalents. 
BRIEF DESCRIPTION QF THE DRAWINGS 

The accompanying drawings, which are in and constitute a part of this 
specification, illustrate several embodiments of the invention and. together with the 
description, serve to explain the principles of the invention. 

Fig. 1 is a block diagram of a computer system in accordance with a 
preferred embodiment of the present invention. 

Fig. 2 is a block diagram showing input and output to and from page draw 

editor software of Fig. 1 . 

Fig. 3 shows an example of display vi f ew before the user has created any 

display elements on the page. 

Fig. 4 shows the display of Fig. 3, including a banner, navigator buttons, 
and text buttons automatically created by a preferred embodiment of the present 
invention. 
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Fig. 5 shows the display of Fig. 4 after the user has dragged and dropped 
an image and some text into the layout. 

Fig. 6 shows a preview display of the layout of Fig. 5. 

Fig. 7 shows the display of Fig. 5 after the user has dragged and dropped 
the text to a different location on the page. 

Fig. 8 shows a preview display of the layout of Fig. 7. 

Fig. 9(a) shows a detail of a tool window of Fig. 3. 

Fig. 9(b) shows a portion of the tool window displayed in connection with 
an Image tool. 

Fig. 9(c) shows a portion of the tool window displayed in connection with a 
Forms tool. 

Fig. 9(d) shows a portion of the tool window displayed in connection with a 
Draw tool. 

Fig. 10(a) shows a Page tab in a Properties window of Fig. 3. 
Fig. 10(b) shows a Layout tab in the Properties window of Fig. 3. 
Fig. 10(c) shows a Rectangle tab in the Properties window of Fig. 3. 
Fig. 10(d) shows a Text tab in the Properties window of Fig. 3. 
Fig. 10(e) shows an ActiveX tab in the Properties window of Fig. 3. 
Fig. 10(f) shows a Java APPLET tab tfi the Properties window of Fig. 3. 
Fig. 10(g) shows a Shockwave tab in the Properties window of Fig. 3. 
Fig. 10(h) shows a Table tab in the Properties window of Fig. 3. 
Fig. 1 1(a) shows a first pull-down menu. 
Fig. 11(b) shows a second pull-down meriu. 
Fig. 1 1(c) shows a third pull-down menu. 
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Fig. 12 is a flow chart showing steps performed by the page draw editor - 
software to define a page layout. 

Fig. 13 is an example showing an initial internal representation stored in a 
memory of objects automatically generated on the page by the page draw editor 
software for the layout of Fig. 4. 

Fig. 14 is an example showing the internal representation after some 
display elements have been added by the user. 

Fig. 15 is an example showing the internal representation after a display 
. element has been moved by the user. ;' ; • 

Fig. 16(a) is an example of a draw object for a page banner. 

Fig. 16(b) is an example of a first draw object for a navigator button. 

Fig. 16(c) is an example of a first draw object for a navigator button. 

Fig. 16(d) is an example of a draw object for a text button. 

Fig. 17 shows an example of a display used to allow the user to publish the 
pages of a site. 

Fig. 18 shows an example of a display used to allow the user to specify 
details of how to publish a site: 

Fig. 19 is a flow chart showing steps performed by the page editor software 

to publish a page. 

Fig. 20 a flow chart showing steps performed by the page editor software 

to publish a normal page. 

Fig. 21 is a flow chart showing steps performed by the page editor software 

to publish a stacked page. 

Fig. 22 is a flow chart showing steps performed by the page editor software 
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to generate initial HTML for a page. 

Fig. 23 is a flow chart showing further steps performed by the page editor 
software to generate an HTML table for layout elements of a page, such as a 

header, body, and footer. 

Fig. 24 is a flow chart showing steps performed by the page editor software 

to generate an HTML table. 

Fig. 25 is an example of steps performed by the page editor to generate 

final HTML for a page. 

Fig. 26 is an example of first steps involved in determining an HTML table 



size. 



Fig. 27 is an example of second steps involved in determining an HTML 



table size. 

Fig. 28 is an example of a matrix generated by the steps of Figs. 26 and 

27. 

Fig. 29 is a block diagram of how the matrix of Fig. 28 is used to generate 
an HTML table, which a browser uses to display a portion of a page. 
Fig. 30 shows an example of a Style display. 
Fig. 31 shows an example of an Assets? Display. 

Fig. 32 shows an example of a plurality of link dialog boxes, showing a 
structural link, an internal link, and an external link. 

Fig. 33 is a flow chart showing updating of structural links for a page. 

Fig. 34 shows an example of a dialog box used to create a data object. 

Fig. 35 shows a block diagram of an example of a stacked page and a 
series of data pages. 
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Fig. 36 shows an example of an icon for a stacked page. 

Fig. 37 shows an example in which a user has opened the Tool window 
and selected the DataList tool. 

Fig. 38 shows a Properties window with a DataList tab opened for the 
DataList tool and the DataList window. 

Fig. 39 shows a further example of a Properties window with a DataList 

tab. 

Fig. 40 shows an example in which a user has opened the Tool window 
and selected the DataField tool. 

Fig. 41 shows a Properties window with a DataField tab opened for the 

DataList tool. 

DETAILED DESCRIPTION OF PREFE RRED EMBODIMENTS 

Reference will now be made in detail to a preferred embodiment of the 

invention, an example of which is illustrated in the accompanying drawings. 

Wherever possible, the same reference numbers will be used throughout the 

drawings to refer to the same or like parts. 

I. System Overview 

Fig. 1 is a block diagram of a computer system 100 in accordance with a 
preferred embodiment of the present invention. Computer system 100 includes a 
CPU 102; a memory 104; input/output lines 105; an input device 150, such as a 
keyboard or mouse; and a display device '160, such as a display terminal. 
Computer 100 also includes an input device 161, such as a floppy disk drive or CD 
ROM reader, that reads computer instructions stored on computer readable 
medium 162. such as a floppy disk or a CD ROM. These computer instructions are 
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the instructions of e.g., page draw editor software 120. Memory 104 includes page- 
draw editor software 120, draw objects 130, HTML 140. and image files 140, etc.. 
as described in further detail below. 

A person of ordinary skill in the art wilf understand that memory 104 also 
contains additional information, such as application programs, operating systems, 
data, etc., which are not shown in the figure for the sake of clarity. It also will be 
understood that computer system 100 can also include numerous elements not 
shown in the Figure for the sake of clarity, such as disk drives, keyboards, display 
devices, network connections, additional memory, additional CPUs, LANs, internet 
connections, input/output lines, etc. 

In the following discussion, it will be understood that the steps of methods 
and flow charts discussed preferably are performed by processor 102 executing 
instructions stored in memory, such as instructions of editor software 120. Editor 
software 120 can be initially loaded into memory from computer readable medium 
162. It will also be understood that, although "hie following paragraphs describe an 
implementation of the present invention using object-oriented programming 
techniques, the invention is not limited to any such techniques and may be 
implemented using any appropriate techniques for implementing the functionality 
described herein. The described embodiment is written in the C++ programming 
language and runs under the Windows 95 operating system, but the invention is 
not limited to any particular programming language or operating system. 
("Windows 95" is a trademark of Microsoft Corporation.) 
II. Creation and Manipulation of a Web Page Layout 

Fig. 2 is a block diagram showing input and output to page draw editor 



=11 -r ' 



PCT/US97/12817 

WO 98/04978 

software 120 of Fig. 1. Page draw editor 120 includes a portion 202 that creates- 
and manages a page layout and a portion 204 that publishes the page 140. The 
user uses a drag and drop interface to define the page layout. Pages can include 
new text and images or preexisting text and images. The user initiates publish 
portion 204 by clicking on a "publish" button: displayed b y the editor 120, as 
described below. Publish portion 204 generates HTML for the page, as also 
described below. The page is translated into an HTML table that yields a 
WYSIWYG Web page when displayed by a browser. 
A. Creating and Modifying Display Elements of a Page Layout 

Fig. 3 shows an example of a page view displayed on display device 160 
before the user has created any display elements on the page. The display of Fig. 
3 is opened when the user indicates (using a pull-down menu or the like) that he 
wishes to create a new page. In the described embodiment, the user clicks on a 
"Page" button 304 in the navigator bar. The page draw editor allows the user to 
design a page just as it will appear when viewed with a browser. The user uses 
the page draw editor to add text graphics, an&rther display elements to the page. 
The user can then rearrange display elements by dragging and dropping them to a 
new location, placing the display elements exactly where they will eventually 
appear with pixel level accuracy. 

A title 301 of the page defaults to "Untitled" if the user has not yet named 
the page. Fig. 3 includes a grid of lines: These lines are shown as dotted lines, 
but can also be solid lines. In the described embodiment, the grid also can be 
turned off so that no grid is displayed. The grid preferably is not included in the 
generated HTML. In Fig. 3, the grid has a granularity of 24 x 24 pixels in 
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accordance with a default width as shown in a Properties window 350, as 
discussed below. 

The display of Fig. 3 includes a plurality of buttons: a "Site" button 302, 
"Page" button 304, a "Style" button 306, an "Assets" button 308. and a "Publish" 
button 310. The display also includes a "Preview" button 312. a "New Page" 
button 314, a "Goto" button 316. and a "Last" button 318. Site button 302 causes 
execution of a "site editor". Style button 306 and Assets button 308 are discussed 
below. New Page button 314 causes a page such as the page of Fig. 3 to be 
displayed. 

Goto and Last buttons 316, 318 transfer control to a most recent display or 
a user-selected previous display, in a manner known to persons of ordinary skill in 
the art. The described embodiment keeps a "history" of execution of page draw 
editor 120 in order to implement the Goto and Last buttons. 

The display of Fig. 3 further includes a Secondary navigator bar 365, 
including a "Layout View" button 320 and an "HTML Source" button 322. When the 
user clicks on Layout View button 320, a display having a format such as that of 
Figs. 3-8 is displayed. When the user clicks on HTML Source button 322. a display 
(not shown) shows the HTML that is generated for the current page layout. Button 
322 is omitted in an alternate embodiment. Other views have other buttons and 
toggle switches on the secondary navigator bar, as required by the particular view. 
Secondary navigator bar 365 contains a dotted line extending vertically downward 
from a currently clicked button (e.g., Page button 304) to a selected one of the 
buttons on secondary navigator bar 365: As the user selects different buttons on 
the primary and secondary navigator bars, the dotted line is redrawn to connect the 



li 



WO 98/04978 " # 1 ' PCT/OS97/12817 

currently selected buttons. This feature makes it easy for a user to see which - 
buttons are currently selected and to mentally connect the functions of the primary 
and secondary navigator bars. 

Fig. 3 also shows "Properties" window 350 in which a "View" tab is 
selected. Properties window 350 includes three tabs: a 'View" tab 352, a "Page" 
tab 354, and a "Layout" tab 356. The values shown in Properties window 350 are 
values for the current page. Properties window 350 currently shows view 
properties because View tab 352 is selected. Figs. 10(a) and 10(b) show 
examples of the Page and Layout tabs, respectively. A fourth tab (see, e.g., Fig. 
10(c)) is a context sensitive tab and represents various properties, depending on 
the tool being used. Other tabs may appear in other implementations. 

The values shown in Properties window 350 of Fig. 3 are the default values 
for viewing a newly created page. Properties window 350 includes a 
"Measurement Unit" area 360, a "Element border" flag area 362, "Grid Width" and 
"Grid Height" areas" 364, 366, a "Show Grid" flag 365, font size areas 368, 370, a 
"Color" area 372, a "Horizontal Splitter" flag area 374. and a "Snap to Grid" flag 
area 376. 

Thus, in the example, the grid is measured in units of pixels. Element 
borders are drawn around each display element on the display device. 
A grid of 24 x 24 pixels is displayed. The specified fonts are used. The page uses 
the colors described in the colors area 372. The "Snap to Grid" property is turned 
off. It will be understood by persons of ordinary* skill in the art that page draw editor 
software 120 stores values corresponding to this Property window and each 
Property window discussed herein in memory 104. All values in Properties 
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window 350 may be changed by the user. Values in memory 104 will be changed- 
accordingly. 

The display of Fig. 3 further includes a 'Tools" window 324. As shown in 
Fig. 9(a), Tools window 324 includes a "cursor" tool 380, a "zoom in" tool 381, and 
a "zoom put" tool 382. These three tools have an outward operation similar to 
"cursor," "zoom in," and "zoom out" tools known in the art. The "cursor." "zoom in," 
and "zoom out" tools are collectively known as "control tools." 

Tools window 324 also contains a "Text" tool 383, an "image" tool 384, a 
"Draw" tool 385, a 'Table" tool 386, an "Audio" tool 387, a 'Video" tool 388. a 
"Java" tool 389. an "ActiveX" tool 390, a Shockwave tool 391. a "Form" tool 392. a 
"DataList" tool 393. and a "DataField" tool 3,94. The Text. Image, Draw. Table. 
Audio, Video. Java. ActiveX. Shockwave, Form. DataList, and DataField tools are 
collectively known as "content tools." (Java is a trademark of Sun Microsystems, 
Inc. Shockwave is a trademark of Shockwave Corp. ActiveX is a trademark of 
Microsoft Corporation.) Tools window 324 also includes a plurality of buttons 395 
that contain various buttons at various time, as discussed below in connection with 

various ones of the tools. 

It will be understood that the empty page of Fig. 3 can be edited in the 
same manner described below for an existing page. 

Fig. 4 shows the display of Fig. 3, including a banner, navigator buttons, 
and text buttons automatically created by a preferred embodiment of the present 
invention. The example of Fig. 4 is displayed Sfter the user indicates that he wants 
to edit an existing page by preferably: 1 j double clicking on an icon for the page 
(not shown) or 2) selecting a page icon and clicking "Page" button 304 of Fig. 3 

13 



WO 98/04978 PCTAJS97/12817 

(not shown). The described embodiment of the present invention automatically- 
creates certain draw objects in memory for the page. The automatically created 
draw objects reflect links between : pages of the site, as described below in the 
copending application. The user can easily create and move display elements on 
the page, which causes changes to corresponding draw objects in memory 104. 
Horizontal splitters such as 380 and 382 are displayed. 

The display of Fig. 4 creates a page having three parts: a header 402. a 
body 404, and a footer 406. The user can move the dividers 380, 382 between 
the header, body and footer as is known in the art. Moving the dividers adjusts the 
size of the header, body or footers on the finished page. The header, body and 
footers can also be scrolled. Page draw edii-pr. 120 allows individual scrolling in 
each of these parts. In the described embodiment, the page of Fig. 4 is entered 
from the site view, and automatically creates display elements of header 402 and 
footer 406 reflecting the logical connection of the current page to other pages. 

Header 402 automatically contains a banner 410 and a plurality of 
navigator buttons 412. In the example, the banner contains the name of the 
selected page ("Products"). Navigator buttons 412 include buttons for a homepage 
("Home button 4). a "Welcome" page ("Welpome" button 416). and a "Private" page 
("Private" button 418). Navigator buttons 412 preferably include an image, such as 
the 3D button image shown in Fig. 4. This image may be predefined or defined by 
the user through use of a pop-up window. 

Thus, in Fig. 4, the navigator button!? 412 automatically include buttons 
corresponding to the home page and to the previous hierarchical level of the page. 
Alternate implementations of the present invention automatically display navigator 
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buttons for one or more of the home page, the parent page, sibling pages, and- 
children pages. In some embodiments, the user chooses which navigator buttons 
are generated automatically by way of a pop-up site window. The user may add or 
delete additional buttons and may move buttons, as described below. 

Footer 406 automatically contains a plurality of text buttons 428. These 
text buttons preferably correspond to the navigator buttons 412. Thus, text buttons 
428 include buttons for the homepage ("Home text button 430), the Welcome page 
452 ("Welcome" text button 432). and the "Private" page 454 ("Private" text button 
434). The user may add or delete additional buttons and may move buttons, as 
described below. The internal memory representation of banner 410 and of 
buttons 412 and 430 are discussed in detail below. 

Figs. 5-8 show an example of creation of display element in a page layout 
and also show an example of a modification to the page layout using a drag and 
drop interface in accordance with the described embodiment of the preferred 
invention. Fig. 5 shows the display of Fig. 4 after the user has dragged and 
dropped an image 502 and some text 504 ' into the layout. Specifically, as 
discussed in detail below, the user creates image 502 using Image tool 382 and 
creates text 504 using Text tool 383. In the example, image 502 is a 324 x 216 
pixel image originally stored in memory or on a storage device attached to 
computer system 1 00. 

Fig. 6 shows a preview display of the layout of Fig: 5. Fig. 5 is displayed 
when the user clicks on Preview button 312 of Fig. 3 (or selects "Preview" from a 
pull-down menu). In order to preview a site", page draw editor 120 actually 
generates HTML for the current layout of the page and stores it at a predetermined 
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(or user-defined) location. The editor then invokes a browser program (such as the- 
Netscape Navigator browser, version 3.x, manufactured by Netscape 
Communications Corp. of Mountain View, California). The browser displays a Web 
page 602 described by the generated HTML jJote that no HTML is generated for 
dividers 380. 382 and that no HTML is generated for the outlines around the text 

and ima 9 e 
Fig. 7 shows the display of Fig. 5 after the user has dragged and dropped 
the text to a different location on the page. Specifically, as discussed in detail 
below, the user places a cursor on text 504 using input device 150 (such as a 
mouse) and drags the text to a new position using input device 150. Movement of a 
display element on a display device in accordance with cursor input is known in the 
art and will not be described herein. The draw object associated with text 504 is 
changed to reflect this movement as described below. 

Fig. 7 also shows Properties window 350 in which "Layout" tab is selected. 
The values shown in Properties window- 35.0' are values for the current page. 
Properties window 350 (with a Layout tab)' includes a "Layout Name" area 702, a 
"Width" area 704, a "Height" area" 7Q6, a "Site Style Background" 708, a "Solid 
Color" area 710, a "Picture" area 712, a "Head Name" area 714. and a "Footer 
Name" area 716. 

Thus, in the example. Layout of Fig, 7 is currently untitled. The layout is of 
the specified height and width. The page uses the type of background described in 
areas 703-712 (i.e.. a predetermined "Site style background", such as a picture of a 
marbled surface) instead of a solid background or a image background provided by 
the user. It will be understood by persons of ordinary skill in the art that page draw 
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editor software 120 stores values corresponding to this Property window and each 
Property window discussed herein in memory. 104. All values in the Properties 
window 350 of Fig. 7 may be changed by the user. Values in memory 104 will be 

changed accordingly. 

Fig. 8 shows a preview display of the layout of Fig. 7. As shown in Fig. 7. 
the user has dragged and dropped text 504 to a new location, thus changing the 
page layout. The Preview function causes new HTML for the changed page layout 
to be generated and the new HTML to be displayed by the browser in window 602. 
It will be understood that, in the Preview views of both Figs. 6 and 8, the HTML 
generated for the page causes a browser to display a page that is pixel-per-pixel 
the same as the display elements on the display screen, assuming that the browser 
supports Netscape version 3.X. Thus, the user can design a page layout and 
expect the page to look exactly as it was designed when the page is displayed by a 
browser. Tag 802 is an optional line resulting from HTML generated in the 
described embodiment of the present invention. 
1. The Pull Down Menus 

Figs. 11(a) through 11(c) show examples of pull-down menus for the 
described embodiment of draw page editor 120. Fig. 11(a) shows an Edit menu 
having an Undo function, a Cut function, a Copy function, a Paste function, a Paste 
Special function, a Delete Page function (A delete display element function is not 
shown), an Options function, a Preferences section, and a Duplicate Layout 
function, which duplicates a current page layout (and its associated draw object 
data structures) for a new page; 

Fig. 11(b) shows a View pull-down menu, which includes a Page 



WO 98/04978 PCT/US97/12817 

Properties function that opens, e.g., Properties window 350 with a page tab 
selected, and Tools Palette function that opens, e.g., Tools window 324. 

Fig. 11(c) shows a Layout pull-down menu, which includes an Align 
Objects function that horizontally, vertically, or centrally aligns display elements, a 
Center Objects function that centers display elements, a Size Objects function that 
sizes display elements, an Element Script function, and a Layout script function. 
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2. The Tools Window 

Figs. 9(a) through 9{d) show examples of Tool window 324 and show 
various icons that are displayed in area 395, depending on which tool is being 
used. Some of the tools of the described embodiment can be thought of as a 
Swiss army knife; when you select one. a secondary group of tools appears in area 
395, each secondary tool performing a different function on the same kind of 
display element. 

3. The Text Tool 

When the user clicks on Text tool 383, page draw editor 120 allows the 
user to enter a text display element. The user uses the cursor to create and size a 
text box on the display and then types text inside it. When text is created, a Text 
tab shown in Fig. 10(d) is displayed in the Properties window 350. This Properties 
window allows the user to enter properties of the text display element. These 
properties include whether the text is bold, italic, or has a strike-out bar, the font, 
the font size, paragraph alignment, and whether to use a bullet. The properties 
further include whether to use a predetermined "site style" for the text (i.e.. a 
predetermined font, color, size, etc. stored in memory 104 under a "site style 
name") or whether to use a user-specified text color. The user may also specify a 
fill color for the text box. If the user indicates that the text box is also a link, he may 
also fill in the name of an associated script (e.g.. a CGI script). Once the link is 
created, the location of the link is added to a list of hotspot locations stored in 
memory and values are stored in the text draw object to indicate that the text 
contains a hot spot and its URL. Once the user has specified the text, a text draw 
object is added to the list of draw objects. Currently, not all browsers support 
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custom fonts. Netscape Navigator 3.0. however, supports such custom fonts and- 
other browsers are expected to do so in the future. 
4. The Image Tool 

When the user clicks on Image tool 384, page draw editor 120 allows the 
user to specify an image display element. Unlike the text boundary, the image 
boundary resizes to fit a user-specified image. Once the image has been added to 
the display, the user can create a link on all or part of the image or select one color 
in the image as transparent. The user can also change the size of the image using 
the cursor. 

When the user clicks on Image tool 384, page draw editor 120 displays a 
Draw tab (not shown) in properties window 350 in addition to the tabs shown in Fig. 
3 and alters the Tool Window 324 as shown in Fig. 9(b). This Properties window 
allows the user to enter a name of an existing image and various properties of the 
image, such as whether the image is transparent, whether a fill background should 
be added to the image, and whether the image contains a link (e.g.. a URL).The 
image tool has five secondary tools, shown in Fig. 9(b). Tool 3050 allows the user 
to draw a boundary in which to place the image file. Tool 3052 allows the user to 
click on a color of the image that he wants to be transparent. When the image is 
displayed, pixels of that color in the image will be suppressed so that the 
background will show through. (This means that a new image with a transparent 
color must be generated when the HTML is generated). A flag in the Image draw 
object is set to indicate transparency. " ! ' ' 

Tools 3054-3056 allow the user to specify a "hotspot" on the image having 
different shapes. The user can create a rectangular, circular, or polygon hotspot. 
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The user draws and sizes the hotspot on the display using the cursor and identifies- 
the link/URL for the hotspot using a pop-up window (not shown). Once the hotspot 
is created, it is represented in the display by slightly distorting the image in the 
hotspot area. The hotspot is added to a list of hotspot locations stored in memory 
and values are stored in the object to indicate that the image contains a hot spot 
and its URL. Once the user has specified the image, the image is displayed (e.g., 
image 502 of Fig. 5) and an image draw object is added to the list of draw objects. 
5. The Draw Tool 

When the user clicks on Draw tool 385, page draw editor 120 allows the 
user to enter a Draw display element. The Drjaw tool has five secondary tools 395. 
shown in Fig. 9(d): rectangle 1950, round rectangle 1952. ellipse 1953. line 1954, 
and polygon 1955. When the user clicks on Draw tool 385. the page draw editor 
displays the secondary draw tools 395 of Fig. 9(d). The user can then choose a 
secondary draw tool. If, for example, the user selects rectangle 1950. a rectangle 
Draw tab (see Fig. 10(c)) appears in Properties window 350 in addition to the tabs 
shown in Fig. 3. Similar tabs appear when the other secondary draw tools are 
selected. The Polygon tool allows the user to draw a polygon using the cursor, as 
is known. 

In the example, Properties window 350 allows the user to enter properties 
of the rectangle, such as the color of the rectangle, the border color and size of the 
rectangle, any text inside the rectangle (and its properties), whether a fill 
background should be added to the image, and whether the image contains a link 
(e.g., a URL). Once the user has specified the shape, the shape is displayed on 
the screen and an image draw object is added to the list of draw objects. In the 
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described embodiment, each type of draw element has a different type of draw - 
object. 

6. The Table Tool 

When the user clicks on Table tool 3861, the page editor 120 allows the 
user to enter a table in the display. The Table tool causes a table window to be 
opened (see Fig. 10(h)). When the user clicks on Table tool 386, the page draw 
editor displays a "table" tab in Properties window 350 of Fig. 10(h). The user can 
then specify the dimensions of the table. For example, the user can specify the 
number of columns, the number of rows, and the type of object that goes in each 
cell of the table. Once the user has specified the table, the table is displayed on 
the screen and a table draw object is added to, the list of draw objects. A table 
layout element cause a table to be generated inside a table when HTML is 
generated for the page. 

7. The Sound Tool 

When the user clicks on Sound tool 387- f page draw editor 120 allows the 
user to draw a boundary in which to place an icon as a visual placeholder for an 
audio file. The audio file is specified through a Properties tab (not shown). In the 
final published Web page, users can click the icon to hear the audio. Once the 
user has specified the audio icon and an associated sound file, the audio icon is 
displayed on the screen and a sound draw object is added to the list of draw 
objects. 

8. The Video Tool 

When the user clicks on Video tool 388, page draw editor 120 allows the 
user to draw a boundary in which to place an icon as a visual placeholder for a 
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video file. The video file is specified through a Properties tab (not shown). In the- 
final published Web page, users can click the icon to see the video. Once the user 
has specified the video icon and an associated video file, the video icon is 
displayed on the screen and a sound draw object is added to the list of draw 
objects. 

9. The Java Tool 

When the user clicks on Java tool 389, page draw editor 120 allows the 
user to specify a Java applet and an address for the applet. The Java tool, the 
ActiveX tool, and the Shockwave tool all specify display elements that are 
exemplary of a type of display element called a "plug-in," Java applets are small 
programs that can be downloaded over the web and run on most computer 
platforms. The described embodiment allows the user to specify an icon for a Java 
applet and the location of the Java applet similarly to how the user specifies a 
sound or video icon and file. When page is displayed by a browser and the user 
clicks on the Java applet icon, the Java applet will be downloaded and executed. 

The user specifies a Java applet and. icon through use of a Java tab in 
Properties window 350 (see Fig. 10(f)). This Properties window allows the user to 
specify a class of applet, to browse through a plurality of predefined applet names, 
to review parameter information for the selected applet name, to specify an 
alternate tag for the Java icon, and to specify a script. Once the user has specified 
the Java icon and an associated address, the Java icon is displayed on the screen 
and a Java draw object is added to the list of draw objects. 

10. The ActiveX Tool 

When the user clicks on ActiveX tool 390, page draw editor 120 allows the 
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user to specify an ActiveX file and an address for the file. ActiveX files are small- 
programs that can be downloaded over the web and run on most computer 
platforms. The described embodiment allows the user to specify an icon for an 
ActiveX file and the location of the ActiveX file similarly to how the user specifies a 
sound or video icon and file. When page is displayed by a browser and the user 
clicks on the ActiveX file icon, the ActiveX file will be downloaded and executed. 

The user specifies an ActiveX applet. The user has specified the ActiveX 
icon and an associated address, the ActiveX icon is displayed on the screen and 
an ActiveX draw object is added to the list of draw objects. 

11. The Shockwave Tool 

The user specifies a Shockwave video file through use of a Shockwave tab 
in Properties window 350 (see Fig. 10(g)). This Properties window allows the user 
to browse a plurality of file names, to specify art alternate tag. Once the user has 
specified the Shockwave file, a predetermined Shockwave icon is displayed on the 
screen and a Shockwave draw object is added to the list of draw objects. 
12. The Forms Tool 

When the user clicks on Forms toot 392; 'page draw editor 120 allows the 
user to specify elements of an HTML form: As is known, forms are an interactive 
Web component. They allow a user to send data to a server, either as request for 
more data or as a submission of information to the server. As is known, forms are 

controlled by CGI scripts. 

The Forms tool has six secondary tools 395. shown in Fig. 9(c): button 
1950. checkbox 1952. radio button 1953. single line text 1954. multi-line text 1955. 
and list box 1956 (also called a "pull-down menu"). When the user clicks on Forms 
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5 tool 392, the page draw editor displays the secondary draw tools 395 of Fig. 9(c). • 

The user can then choose a secondary draw tool. If, for example, the user selects 
button 1950 and clicks in the display window for, the page, a button display element 
is added to the page. In addition, a button tab (not shown) appears in Properties 
window 350 in addition to the tabs shown in Fig. 3. Similar tabs appear when the 
io other secondary draw tools are selected. 

Using the example of a forms button, Properties window 350 allows the 
user to enter properties of the button, such as the color, any text inside the button 
(and its properties), and whether a fill background should be added to the button. 
In addition, the user decided whether the button is Submit button or a reset button. 
15 During display, a submit button sends the contents of all the form objects to a 

server. A reset button allows the user to dear the form and start over. 

The following paragraph describes, without limitation, other examples of 
the various forms elements that can be specified by the user. Each of the forms 
elements described below is an element of a type that is currently included in 
20 conventional hand-coded HTML forms. Other embodiments may include still other 

form elements not described herein. A check box is used to let users select one or 
more items from a group. (Editor 120 allows the user to specify what these 
elements are.) A radio button behaves just like a check box, except that only one 
radio button in a group an be checked at once. A single-line text provides an area 
25 where the user can enter a single line of text. A multi-line text provides an area 

where the user can enter a more than one line of text. A list box takes the form of 
a pop-up menu or a box with a scroll bar. Editor 120 allows the user to specify the 
form of a list box. Once the user has specified a form element, the video icon is 
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displayed on the screen and a form element draw object is added to the list of draw- 
objects. In the described embodiment, each type of form element has a different 
type of draw object. The described embodiment allows one form in the header, 
one form in the body, and one form in the footer. This is because the form layout 
elements do not contain an identifier as to which form they belong to. Other 
implementations may contain such, an identifier and may allow multiple forms in the 
header, body, or footer. 

13. Managing Assets (Files, Links, and Data Objects) 
Fig. 31 shows an example of an Assets display 3100 that displays all 
current files, links, and data objects for a data processing system. The display 
3100 is generated when the user clicks on Assets button 308 of Fig. 3. (Note that a 
dotted line extends from the Assets button to the Secondary navigator bar 365.) 
The Assets view shows all files, hyperlinks, or data objects associated with the 
current system, depending on whether the user clicks secondary button 3102, 
3104, or 3106. Fig. 31 shows an example of all data objects for the page of Fig. 5. 
It will be understood that the Assets view reflects files, links, and data objects 
stored in memory 104. Newly created files, links, and data objects are stored in 

memory 104 as well. 

The File view shows information aboutiall files in the site, such as: whether 
the file has a type of navigation bar images, pictures, sound, video, Java applets 
and other plug-ins. The user can change, e.g., the name and location of files and 
can add and delete files through user of a dialog box (not shown). 

The Links view shows information about all links in the site, such as: 
whether a link is internal, external, or structural. A structural link reflects a 
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hierarchical link shown in the site view. In a preferred embodiment changing a- 
structural link in the Assets view changes the link in the site view and between 
page objects in the memory. The user can change links and can add and delete 
links through use of a dialog box (not shown). 

The Data Objects shows information about all DataObjects in the system. 
Data objects can be internal data objects or can be ODBC (Object Data Binding 
Convention) objects implementing Microsoft's standard for web page/database 
binding. Before creating a stacked page, as discussed below, the user should first 
create an internal object or ODBC object for the data that is to be included in the 
stacked page. 

Fig. 34 shows an example of a dialog box 3400 used to create a data 
object. Dialog box 3400 is displayed when the user clicks on a "new object" button 
(not shown) or clicks on a "new object" pull-down menu (not shown). Box 3400 
includes a data object name area 3402, a data object delete button 3404. an add 
field button 3408, an area 3410 listing the current fields of the data object, a "get 
index field" button 3412, a set button 3414. and move up/down buttons 3416, 
3418. To create a data object in memory 104, the user enters information in dialog 

box 3400. 

14. Creation of Stacked Pages 

The described embodiment allows the user to create a special type of page 
called a "stacked page." which is made up of "data pages." A stacked page 
causes the described embodiment to generate a plurality of HTML pages 
displaying a series of information, such as a the values in a series of records from 
a database. Fig. 35 shows a block diagram of an example of a stacked page 3502 
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and a series of pages 3504 displayed when a browser views the HTML pages - 
created from the stacked page. To create a stacked page, the user first creates a 
data object, such as a data base object (as described above). The user then 
creates a DataList draw object and a DataField draw object for the stacked page. 

To create a DataList draw object, the user clicks on DataList tool 393 of 
Fig. 3. Page draw editor 120 allows the user to specify a list of fields to be 
displayed on a stacked page. When the user clicks on DataField tool 394. page 
draw editor 120 allows the user to specify the layout of the fields in the data list. 
Once the user has specified a DataList and a DataField. an appropriate display 
element is displayed on the screen and a DataList draw object or a DataField draw 
object, respectively, is added to the list of draw objects for the page. 

The following paragraphs describe an example of creation of a stacked 
page. Fig. 36 shows an example of an icon for a stacked page that is displayed by 
the site level editor described in the co-pending application of Arora et al. Once a 
page includes a DataList and a DataField object, it is classified as a stacked page. 
When a page is a stacked page, it is displayed at the site level as overlapping 
pages icon 3602. Stacked pages are moved at the site level in substantially the 
same manner as normal pages. However, multiple HTML pages are generated for 
each stacked page. 

Fig. 37 shows an example in which a user has opened Tool window 324 
and selected DataList tool 393. The user has hen specified a rectangle 3704. 

Fig. 38 shows a Properties window 350 with a DataList tab 3802 opened 
for DataList tool 393. Fig. 38 also shows a DataList window 3802. The user 
specifies, in the DataList window 3803. fields of the list that can be displayed on 
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the stacked page (for example, "Headline List"). The user then clicks on the listed- 
DataList fields to select which fields of the data object will be included in the 
stacked page. The properties of the DataList are displayed in Properties window 
350. 

In DataList window 3803, the user optionally specifies a sort field 3806 in 
the data object, and optionally sets a filter 3808 (e.g., product = "xxx," not shown). 
Only values in the specified fields having the filtered value will be part of the 
stacked page. The user may also specify whether any of the fields will be linked to 
other pages. Fig. 40 shows "Data List Tab" in Properties window 350. 

Fig. 40 shows an example in which a user has opened Tool window 324 
and selected DataField tool 394. The user has then specified a rectangle 4004. 
The user names the data list ("Headline List") and defines an appearance of the 
fields selected in Fig. 38. An area for each field can be sized and dragged to 
define the layout of each data page in the stacked page. 

Secondary navigator bar 365 includes a button bar 4006 that has four 
buttons for managing data pages within a stacked page. These four buttons 
include: a "+" button, which creates a new data page, a button, which deletes 
the current data page, a "back" button which 1 displays the contents of a previous 
data page, and a "forward" button, which displays the contents of a next data page. 
In, for example, a data base, the user can create as many data pages as there are 
records in the data base. Each data page 1 will automatically contain display 
elements to a first, next, and previous data page. Thus, a stacked page has a list 
of draw elements. An example of such as draw element may have a structural link 
to the "next" or "previous" data page. If the page is a stacked page, a flag in 
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memory is set to indicate this fact, since multiple HTML pages can be generated 
for a single stacked page (i.e., one HTML page for each data page). 
B. Creation of Draw Objects for the Display Elements 

Fig. 12 is a flow chart showing steps* performed by page draw editor 
software 120 to edit a page layout during execution of the page draw editor. In 
step 1202, the page draw editor determines whether the page is a new page. If it 
is an existing page, in step 1204, the current page layout for the page is displayed 
in accordance with the already existing draw objects for the page. The page layout 
will include the automatically generated banner, navigator buttons, and text 
buttons, unless the user has previously deleted them. 

If the page is a new page, in step 1206, the editor displays the default 
page layout in accordance with the draw objects for the page. The user exits the 
page draw editor by. e.g.. clicking on Site button 302. Style button 306. Assets 
button 308. or Publish button 310 (or by selecting "exit" from a pull-down menu). 
After the user has edited a page, he can. still ; move the page around in the site 
hierarchy by using the structure/site editor; as described in the co-pending 
application of Arora et al. 

Fig. 13 is an example showing an internal memory representation of draw 
objects automatically generated by page draw editor software 120. The draw 
objects are generated when a page is created and are modified when the page is 
modified. The internal representation includes a list of draw objects, representing 
each display element of the page of Fig. 4. Thusr, the list of draw objects includes a 
banner draw object 1302 (corresponding to banner 410), a navigator buttons draw 
object 1304 (corresponding to navigator buttons 412), and a text buttons draw 
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object 1306 (corresponding to text buttons 428). In the described embodiment, ail - 
draw objects of the header 402 are stored together and a pointer points to the 
beginning of this list. Similarly, all objects of the footer 406 are stored together and 
a pointer points to the beginning of this list. In the described embodiment, the user 
has not entered any elements into the body 404 and a pointer to body elements 
points to a null list. There are other elements in the layout elements list (such as 
border elements) that are not shown for the sake of ease of explanation. 

Fig. 14 is an example showing the internal representation of Fig. 13 after 
some display elements have been added by, the user. The list now contains an 
image draw object for image 502 and a text draw object for text 504 (see Fig. 5). 
Each draw object contains data specifying its location on the page as shown in Fig. 
5. If the image or text is also a hotspot, information identifying the URL of the link 
is also contained in the object. ' ,' y 

Fig. 15 is an example showing the internal representation after text display 
element 504 has been moved by the user. Note that the position of the text draw 
object does not change in the list of draw objects. However, the position data in 
the text object does change to reflect the object's new position in the page layout. 
Similar changes are made to other page objects whenever the user alters the 
position, appearance, or function of the corresponding display element with the 
page editor 120. 

It will be understood that all draw objects discussed in the following 
paragraphs include a screen position field (indicating the X and Y coordinates of 
the objects' current position on the screen), the height and width of each draw 
object on the screen, and various flags associated with display of the object. Flags 



31 



WO 98/04978 - PCI7US977mi7 

include whether the object has a frame drawn around it. whether the object may be- 
resized to zero width or height, whether the object itself handles mouse commands 
internally, whether the object is currently selected! the color of the object, whether 
the object is transparent, whether the object contains text, etc. It will be 
understood that the specific flags stored In an object may vary from implementation 
to implementation. The position, height, width and flag values are not shown for 
the sake of clarity. It will also be understood that each type of draw object contains 
the data required to describe the appearance and function of the corresponding 
display element. 

Draw objects can be of a variety of types or classes. It will be understood 
that the present invention does not necessarily include any specific types of draw 
objects and may include more or fewer types of draw objects than are discussed 
herein. The draw objects in a preferred embodiment include, without limitation: 

rectangle, 

round rectangle, 

line, 

ellipse, 

text, 

picture/image, 
polygon, 
OLEobject, 
JavaScript, 
database list, 
database field, 
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form button, 

form radio button, 

form checkbox, 

form edit, 

form combobox, 

form clear button, 

zoomin, 

zoomout, 

grid, 

graphic, 

hotspot rectangle, 
hotspot polygon, 
hotspot ellipse, 
background picker, 
Shockwave object, 
Sound, 
Video, 
ActiveX, 

Form Multi edit, and 
MAX SHAPE 

In the described embodiment, each type of draw object has associated 
information that, in general, allows the draw object to be displayed on display 
device 150 in accordance with user draw commands. This information is also used 
to generate HTML for the object (including links and anchors). The following 
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paragraphs describe some examples of draw objects. 

Fig. 16(a) is an example of information associated with a draw object for a 
page banner. It includes a bitmap of the banner and the name of the page (e.g., 
"Products"). Fig. 16(b) is a first example of information associated with a draw 
object for a navigator button object. It includes a node number to which it will link 
when displayed by a browser, a name of the linked to page, and an image of the 
navigator button (e.g.. an image using the GIF. JPEG. BMP. TIFF. EPS. or PCX file 
formats). Fig. 16(c) is a second example of information associated with a draw 
object for a navigator button. The link in the second example is a structural link, 
i.e.. it represents a link according to relationships between the pages/nodes. Fig. 
16(c) includes a smart link to another node, which is specified by relationship, and 
an image. The identity of the link is determined (updated) when the page is 
displayed, previewed, or published. Fig. 16(d) is an example of a draw object for a 
text object. It includes a node number to which it will link when displayed by a 
browser, a name of the linked to page, and a string displayed in the text button. In 
the described embodiment, each draw object contains its type, its X position. Y 
position, width, and height. An example of a draW object of text and a draw object 
for an image is shown elsewhere in this document. It will be understood that each 
type of display element in a page (e.g.. text, image, button, etc.) has a 
corresponding type of draw object. 

In the described embodiment, eadh draw object contains its type, its X 
position. Y position, width, and height and display flags. In general, each draw 
object contains information associated with its corresponding dialog box in which 
the user views properties of the display element on the page. 
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III. Publishing a Page 

Once the user has created a layout for a Web page as described above, 
the user needs to be able to create HTML for the page in accordance with the draw 
objects of the page. Fig. 17 shows an example of a display used to allow the user 
to publish one or more pages. In the described embodiment, this display actually 
allows the user to publish all pages in a Web site. 

Fig. 17 shows a screen displayed when the user clicks on "Publish" button 
310 of Fig. 3. The screen includes three buttons "Settings" 1702. "Stage" 1704, 
and "Publish" 1706. Once the display of Fig. 17 is displayed, the user can either 
"stage" or "publish" his site. Generally, staging is performed first and publishing is 
performed once the site is debugged. Staging and publishing are substantially the 
same, differing in when they are performed during the site development process. 
The user can also set configuration parameters to control the publishing or staging 
process. Clicking on either "publish" button 1706 or "Stage" button 1704 causes 
the described embodiment to generate HTML code for each page in the site (or 
only for pages indicated by the publish flag or by the user). This process is 
described below. 

Clicking on "Settings" button 1702 causes a pop-up window 
1708 to be displayed. Clicking on "Stage" tab 1710 or "Publish" tab 1712 will 
display a window, which allows the user to specify a storage location for the staged 
or published site. Clicking on a "Modify" tab 1808 causes the pop-up window 1802 
of Fig. 18 to be displayed. Window 1802 fallows the user to indicate certain 
attributes of the HTML to be generated for the site (e.g., text only, black and white 
(grey scale), or low-res). 
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Fig. 19 is a flow chart showing steps . performed by page draw editor - 
software 120 to publish a page of a site. It will be understood that the steps of Fig. 
19 are performed by processor 102 executing instructions in page draw editor 
software 120. In step 1904, if the stacked flag of the current page object indicates 
that the current page is a stacked page. then .processor 102 creates HTML for a 
plurality of pages. If the current page is not a stacked page then, in step 1908, 
processor 102 builds HTML for a "normal" page. In either case, the HTML for the 
page is then written to a storage medium of the system. 

It will be understood that, generally, each page object has a corresponding 
list of draw objects describing the elements of the page layout, and that processor 
102 generates HTML in accordance with the lists of draw objects. As described 
above, each list of draw objects automatically includes draw objects representing 
automatically generated banners and links (e.g., to the home, parent, sibling, 
and/or children pages of that page). These automatic links may be structural links. 
The draw objects of a page may also represent other, additional links added by the 
user that are not a part of the site hierarchy. . :Mpfeover, the user can use the page 
draw editor to remove some of the automatically generated draw objects links if he 
so desires. Unless the user explicitly removes them, however, these automatically 
generated links are present in each page layout. Thus, the generated HTML for 
each page will contain links to the home! parents, siblings, and/or children pages 
for each page of the site view. 
IV. HTML Generation for a Page 

Fig. 20 is a flow chart showing steps performed by the structure editor 
software to publish a normal page. Fig. 21 is a flow chart showing steps performed 
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by the structure editor software to publish a stacked page. The steps of Figs. 20 - 
and 21 are similar, except that the steps of Fig. 21 generates multiple HTML pages 
for the stacked page. In Fig. 20 step 2002 creates initial HTML for the page as 
shown in Fig. 22. This step creates the beginning of an HTML page. Steps 2004- 
2008 create HTML tables for each of the header, body, and footer as shown in 

* > 

Figs. 23 and 24. Step 2010 creates final HTML for the end of the page as shown 
in Fig. 25. The preferred embodiment generates Netscape HTML version 3.X. 

Fig. 21 shows the creation of a plurality of HTML pages for a stacked page. 
Each HTML contains, for example, data for one record of a database associated 
with the stacked page. Each of the plurality of HTML pages has a common format 
L5 including the same fields of the database and the same layout of the fields. Each 

page of the plurality of pages has the same format; but different data. 

Step 2214 of Fig. 22 shows thai the HTML for a page includes a tag 
specifying the colors that a browser will use to display regular, visited, and active 
links. Other embodiments specify other HTML tags that specify other attributes 

20 common to the page. . , 

Fig. 23 is a flow chart showing' steps to build an HTML table. In the 
described embodiment, an HTML table is generated for the header, body, and 
footer of each page. Steps 2302-2308 generate a matrix in memory 104 as 
discussed below in connection with Figs. 26-29. Step 2312 create the HTML table 
in accordance with the matrix as shown in Fig. 24. 

Fig. 24 shows steps that create an HTML table. Step 2402 writes a table 
tag including a border of zero width and cellpadding and cellspacing of zero. Step 
2404 generates a table header including column and width definitions for the HTML 
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table. Steps 2406-2418 go through each row and column of the matrix to generate - 
a plurality of cells in the HTML table. Some of the cells in the HTML table can be 
several columns wide and/or several rows high. Step 2420 generates an end of 
table tag. 

Fig. 26 is an example of first steps involved in determining an HTML table 
size for a layout element of a header, body, or footer. In the example, the layout 
element has four display elements. Each display element corresponds to one draw 
object of the page. As discussed above, each draw object has an X position (a 
start row) and a length. Each draw object also has a Y position (a start column) 
and a height. For each object, a first column edge is the X start position and a 
second column edge is the X start position plus the length. In addition, for each 
object, a first row edge is the Y start position- and a second row edge is the Y start 
position plus the height. Processor 102 finds the'row edges and columns edges for 
a current page, yielding data 2602 and 2604. 

Fig. 27 is an example of second steps involved in determining an HTML 
table size for a layout element. Once the column and row edges of the draw 
objects are determined, the edges are sorted, duplicate edges are removed from 
the sorted list, yielding unique row edges and unique column edges (steps 2304 

and 2306 of Fig. 23). The unique rows edges and column edges are then counted. 

In the example, the objects have six column edges and seven row edges. Once 

the unique row edges and column edges are determined, the column widths and 

row heights for each column and row are determined. 

Fig. 28 is an example of a matrix 2802 generated in accordance with the 

edges and draw objects. Matrix 2802 has a number of rows equal to the number of 
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row edges plus one. The matrix has a number of columns equal to the number of - 
column edges plus one. Thus, in the example, the matrix has seven columns and 
eight rows. Each element 2804 of the matrix has a pointer field and an occupied 
flag. The element of row 7, column 2 of the matrix points to object number 1 and is 
marked as occupied. The next four elements in row 2 are also marked as 
occupied. The element of row 3, column 3 points to object number 2 and is 
marked as occupied. The element of row 2, column 5 points to object number 3 
and is marked as occupied. The next four elements in column 5 are also marked 
as occupied. The element of row 5, column 3 points to object number 4 and is 

marked as occupied. 

Fig. 29 is a block diagram of how the matrix 2802 is used to generate an 
HTML table. The HTML table is used by a browser to display a portion of a page 
on display device 160 (such as a header, body, or a footer. (An alternate 
embodiment of the present invention creates jingle table for each page of the 
site). Each element of the matrix is used to generate a cell in an HTML table 
(although some cells occupy more than one row or more than one column). For 
example, the matrix element in row 1, column 1 causes an empty table cell to be 
generated. Each row in the HTML table has a height in pixels that is equal to the 
height for that matrix row. Each cell in the HTML table has a width that is equal to 
the width of the matrix for that column. 

As is known to persons of ordinary skill in the art, the cells in the table can 
be of varying sizes (i.e.. can use the HTML tags "ROWSPAN" and COLSPAN"). 
The matrix element in row 2, column 5 causes-generates of a cell that spans four 
rows (ROWSPAN=4). The matrix element in row 7. column 2 causes generation of 
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a cell that spans five column (COLSPAN=5). 

Fig. 30 shows an example of a Style display. The display of Fig. 30 is 
shown when the user selects Style button 306. The Style button display allows the 
user to select an overall default appearance of all pages in the site. The user can 
override the style for a given page by defining a different style for the page (not 
shown). In the described embodiment, the values shown in Fig. 30 are stored in 
locations of memory 104. The automatic generation of banners, navigation 
buttons, and text buttons is performed in accordance with user-specified style 
values. 

Fig. 31 shows an example of an Assets Display. The Assets display shows 
the files, links, and objects in the data processing system. For example, the assets 
shown in Fig. 31 are the draw objects for the "Products" page of Fig. 5. 

Fig. 32 shows an example of a plurality of link dialog boxes, showing a 
structural link, an internal link, and an external link. 

Fig. 33 is a flow chart showing identification of structural links for a page. 
The links preferably are identified when' the page is displayed, previewed or 
published. Internal and external links are "absolute" links. Structural links are 
identified only as "next sibling link." "next child link", etc. For each link, the node- 
that-is-linked-to is identified (updated) by looking -at the page hierarchy specified by 
the page layout tree. After the node is identified, the processor finds the URL. 
name, etc of the node and generates the display or HTML for the structural link. 

In summary, the described embodiment- of the present invention allows a 
user to define a layout of a Web page. A draw-based editor in accordance with the 
present invention automatically creates draw objects for each page that reflects the 
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user-defined layout When the user "publishes" a page, the described embodiment- 
generates HTML code for the page. A page can also be a "stacked page." A 
single stacked page causes generation of a plurality of HTML pages. The page 
defaults to a user-specified "style," which can be changed by the user. 

Other embodiments will be apparent to those skilled in the art from 
consideration of the specification and practice of the invention disclosed hereinlt is 
intended that the specification and examples be considered as exemplary only, 
with a true scope of the invention being indicated by the following claims and 
equivalents. 



.v. 
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/* NetObjects 

definition of piture object 

*/ 

fifndef _PICTOBJ_H 
fdefine __PICTOBJ_H 

f include "dravobj.h" 
# include " resource. n" 
f include "DOFile.h" 
# include "dlgbase.h" 

class CModelessInsp; 
class CHotSpot; 
class CPictureGeneral ; 
class CDrawRect; 



// flags for picture class //obieC t not stretched 

♦define DRAW NATURAL 1 ^Jbiect stretched to fit 

♦define DRAW_STRETCHED 2 //^ect^ 

fdefine DRAWJTILED « // obiect has hot spots turned on 

fdefine DRAW_HOTSPOTON 16 // ob ^\ n ignJne nt 
fdefine DRAW_H_ALIGN LEFT 32 // p a lign««nt 

fdefine DRAW_H_ALIGN CENTER 64 // ali ^ nment 

fdefine DRAW_GIF_SOURCE 2048 
fdefine DRAW~JPEG_SOURCE 4096 

fdefine DRAW.UN1010WN SOURCE 8192 always rename and generate 

fdefine DRAW_GENERATEALW A Y S 16384 // 

this gif „_ 32768 // this is a data object 

fdefine DRAW_DATAOBJECT 32768 // 

class CDrawPicture : public CDrawRect; 
I 

protected : 

DECIARE__SERIAL( CDrawPicture) ? 

BOOL LoadBitmap ( ) ? 
CDrawPicture () ; 
public: 

CDrawPicture (const CRect* position); 
-CDrawPicture ( ) ; 
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.... changed (void) j 

^ ietstretch (DINT) ; V 

UINT GetStretCh( U4« n ^CRect "position - NOLL) ; 

virtual CRect GetlmagePos ition ( CRect p 

virtual CRect GetImageSize()^ yicw « p) . 

void SizeT S c «Jage£ndle(void) (return 

i nt . , 

n _ImageHandle; ) ; Convert lmage(CPDString *theFileName, 

rpnstrinl * theFilePath) ; 

CPDString * pS tr, const CPDStringi 

BOOL setBitmap (const char pat , 

aFileType = cFILE ^-W^^arypetvoid) s 

vtSflvolf onOpen(CLayoutViey* pVxew) ;^ ^ 

CHotSpotList* e e ^ ove ^[U(cSa^j'*oS)r tSf * 

void j g 
children using point coor g raw0b j * F indchild ( int id); 

vtSuai BOOL ^S?"cPoin? ( point 4 CLayoutViev* pView. 
virtual xnt HUAB v 

BOOL bSeleoted) ; 



void 
BOOL 

void 

DRAW_DATAOBJECT ; ) 



SetHotSpotsOn(300L) ; 
G ctHotSpo1:sOn(void) , 

SetDataObiectOntvoid) <*_PictureFla g s 
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virt u»l cora^l- interacts .const CKec« re=t.CX*ycutvlev 
*pViev) > 

virtual void jvddPropPage<CObLUt*) » 
virtual void A ddProperties(CMenu * P Popup) ; 
virtual BOOL ^^-^ffiitUcS^voioT { } ? 

Bet"TRUE) } 

virtual void SaveUndo(CArchivet 

virtual <*»»). clo„e<CI*youtDa t . .pWY~tB.fl , 

. ^ m pictureFlags ? 

int — 

CHotSpotLis t m_ob j ects ; 

void S etGenerateAlvays(BOOL b = TRUE) 

setVAlignFlag(int) ; 

5S5 *w-»«-5KSSkiU* : theB^fer, ; 

protected : 

. . m imageHandlc ; 

BITMAPINFO * »- biI S £ SiWidth; 

m'biHeiglit; 

* m biBits; 

char * — 

private: . ^ rano „ 1 * m pPictureProp; 

static cPictureGeneral ■ 



t — 



protected: 

//( ( AFX MSG(CDrawPicture) . , 
afi msg-void onPictureProperty (). 
affcSlg void OnEditClearO ; 

//}>AFX_MSG 44 
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DECIARE_MESSXGE_MXP ( ) 



// ptctureAligraaent dialog 

class PictureAligi-ent : public CT2Dialog 

// construction 

PUbli pictureAligrunent(CWnd* pParent = NULL) ; // ^andard 
constructor 

CWnd *parentWnd; 
BOOL uncancel; 
UINT v; 
UINT h; 

DrawShape user; 

void setuser (DrawShape d) ( user = d;) 
// }) AFX_DATA 

// Overrides generate d virtual function overrides 

'// a^l™TUAL(PictureAlignment^ 

SlSSSilid DoDataExchange (CDataExchange* P DX) , // 

DDX/DDV support 

//) )AFX_VIRTUAIi 

// implementation 
protected : 

// Generated »** sa ^ »^|£f ^ 
// 1 (AFX MSG (PictureAligrunent.) 

virtual"void OnOK() ; 

/ / \ \ AFX MSG 

deciareImessage_map ( ) 



); 



^PICTOBJ H///// //// //////////y/f/^f'-/^^^^^^^^^^^^^^^^^^^^^ 
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// cDravText - Text Object 

| define _CRICHTEXTJi_ //I 
# include "dravobj.h" 

V.^tirna/Niwi/'''''""""'"'''' 1 ''''''' 1 '''''''''"' 
l/llltl/ll/l 

, I Tokens that we store in the token ""™^. es and ot her tokens 
>/, SfSie S?S.nS: theffis'no^erin^e counts after the 

JfSl token teke up X "«* "» ta 11 — *** 

_ . „ .,4.- haV e a end token to enable 
// Hote that all that contain data have 
backwards searching 

typedef enum { toXen -just use to communicate 

T TEXT - 0, // "«*"»Jr 

that its a text token holder to break up findtoken 

T_NULL, / / * Aac . i 

// Text formatting tokens turn on/off 
T _BOLDON , // Bold 

fSSSSS&M. //underline 
fSffi^' // ^rikeout 
VSS 0 "' //Blinking 

ViSSS!: // Fixed pitch font 

// - ^ code - ysed to insert HTKL code 

directly into the token stream 

// Text formatting altered as T.FACE <na»e> 

T FACE* 

T FACE" size of font; stored as T_SIZB [size] 

~ T_SIZE, 

T " SIZ T COLOR // *° COl ° r; St ° red " 

T_C0IX>R <COLORREF> T.COLOR Headinq . M r*er . stored as T_HEADING 

TheadlnftSr? WHO - ponging to T_PARAGRAPH - 

storeKsTpTW <ParaFormat> T_PARAFKT 

T SVKBOI,, // Stores a symbol <._.««,*> symbol value 

(int) <T_SYMBOL> 46 
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T.HTKLTAG. //A HTML tag stored 

// string flow control ct 
£-SSlIHE // Hemline - still inside the paragraph 

ZSSSSk. 7; Koftne - autovrap symbol 

iilSSS/" /riin^e stored as T.LINKNAKE <display 
text T_LINKNAKE2 

T_LINKHAME2, stored as T_LINKURL <url> 

T_LINKURL, // binR 

T LINKURL2 
~~ T_LlKKLTRIi2 
} TokenTypes; 

// Notes: 

// T.COI^R:^ colorref . s stored as . kbytes. The maximum byte 
that is normally^xOO^vill^e ^ reset ^ to ^ default color 
defined ^^the^viev, g^thl.0... ^ a color ride is 

# T f ^ G ^H^e iS line° number is stored in the paragraph as 
^tIsoStNKWLINE: Only used for return in FindToKen 

*g$^x££°Sj*^ UKlitruct <T_ L INK3> 
f define OVEFRIDE_OF( CK) *( ( (char*) l(CR) ) + 3 ) 

{define MAX — INDENT 31 ' 

<-*4»»« as thev apply to one paragraph 
// Alignment settings as tney <*f>v±i 

typedef enum I 

AlignLeft = 0, 

AlignCenter, 

AlignRight 

)? 

// Bullit types ; , 
typedef enum { v- J . 

Bull_None = 0, 

Bull_Bullit, 

Bull_Square, 

Bull_Disc, 

Bull_ABC, 

Bull_abc, 

Bull III, 

Bull iii, 

Bulfl23 r 
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// u..a »h.n p«.otln, and d.«otin, 

paragraphs 

} ? 1M „ to select between the proportional and fixed 

// Pitchtype, used to select oetw 

type font 
typedef enum ( 

Proportional, 

Fixed, 
) PITCHTYPE * 

„ <P.r.<,r.phFor»t> T.PM^mT, .!» - « Wt~ 

struct paraFormat („..,. 

unsigned short ' , 2 ' // t o 31 ] levels 

unsigned short il" dei £ \ \\ " 1 

unsigned short iBullit . «. order item number 

unsigned short iOrder : 10, // 

[0.. 1024[ h . t;irt . 1; // special start value 

unsigned short bStart . i, 
for ordered lists 
> % 

// Usaqe of the Font list // position of 

f define F0NTINDEX_AUTOMATIC 0 . 

the Automatic font 127 
idefine FONTINDEX_MAX 

«.4- 4 «« c as will be treated for text 
// The complete set of font settings as will b 

£ j Tnese settings are at any given location applied to the 

^ifthfgJSl font setting. 

struct FontAttrib I //lb 

BYTE rgbRed; //2 b 

BYTE rgbGreen; y 3b 

5™ g^rSi-md. = 1= // » «>« color currently 

BOOL bBold : 1? 
PITCHTYPE pt Pitch : 3? 

BOOL bltalic : l; 

BOOL bunder line : 1. 

BOOL bStrikeout : l; //5 b 

BOOL bBlinX : l? y/ Are we i ns ide an URL 

BOOL bURL : 1.* " 

display string . Tn . eX . 7; //6 b 

unsigned short xFontlndex • /, // io b 

ParaFormat P f * 

^ffi^&« ^ ? w<a ' ^^£,/,, 
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struct URLStruct 

* int UavaEventld; 
>? 

class ExtFontAttrib{ 

// current attribute; 

public. utility information 

CString sHeading; 
Xn t * istyleldx; 
URLStruct urllnfo; 

FontAttr ib f Attr ib ; 

// search commands to the FindText function 

fdefine FIND_HOME 1 

fdefine FIND_END \ 

# define FINDJPREVCHAR 3 

fdefine FIND_NEXTCHAR 4 

fdefine FIND_PREVWORD 5 

fdefine FIN D_NEXTWORD 6 

fdefine FIN D_PREVP ARA 7 

idefine FIND_NEXTPARA 8 

idefine FIND_PREVLINE 9 

#define FIND_NBXTLINE 10 

class CLayoutVievj 

fdefine TALIGN_LEFT 0x01 
fdefine TALIGN_CENTER 0*02 
fdefine TALI GN_RI GHT 0x04 

struct FindReplaceData { 

int ilndex; mT ^„. 
CFindReplaceDialog *pFRDlg. 

int iFoundl; 

int iFound2; 

int careto, caretl; 

BOOL bRewrapped; 

) ; 

//////////// . 

struct CaretStruct 

1 BOOL getlndex; // is index valid, if not then pos is 

valid - calc index in UpdateCaret 
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// index into m text? 
™ ,*« iTVX * X '' // if index set - status if its OK 

BOOL valid; // 

// mouse pos, not maintained if 
CPoint P° 3 ' * F 

valid TRUE height ; // ^^ ht of <=**« cter at 

Caret cbnf ^ " " -usePos; 
BOOL xseti 

)? 

struct LinelnfoStruct, 

public: . w // width of text excl . the 

int width; ^ .... " 

space needed for indent or bullit 
P int height; 

int base; //( Top left comer of the text 

b ox, f/iSlit Sen its before the text hoX Q ^ ^ Qf 

int ^ L iS C <P> <BR> / or So char that is first on 

line, either poxnt to <P> 

softbreak line . FontAt trib for the start of the 

FontAttrib fa; = nna have been applied 

line after all heading and aling have D * f ^ used 
int istyleldx; // Flags for the line 

int f Flags; ■ * 

paragraph 

7/ DiHerent hardened sUes tha^HTHL T<jtal iftdent size 

tU IHDEHT SXZE / 

♦define BULLIT.SPACE 6 //50 // 
before text 

// Minimum Wrap width accepted 
Idefine MIM_WIDTH 10 

contain ascii string _ 00oo04 " " // user »ust not be 

SS^ 52i 1 SS?S-. 0 S 0 SUi* 

// Undo information 

" 50 
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enum UndoOp ( 
Op Insert, 
OpDelete, 
OpCarets , 
Op As sign, 
OpSetT_NUIiL # 
OpMoveBytes , 
OpAssignBytes, 
OpRewrapAll, 

)? 

struct UndoRecord I 
char nOpType; 
union I 



// insert bytes into buffer 
// Delete bytes from buffer 
'// Position carets r 
// assign single oy^ * 
Y, assign range toTWLL 

" BOVe i^ a rInge n of byS" in buffer 
V, SS?«*55St °snou& be remapped 



„ used when martin, (Oplnsert, or deleting 

// and « se l?°L°?HI B foUoved by bytes deleted 
// When OpDelete it is 

StrUC unsigned short iNoBytes; 

unsigned short ilndex; 
) insdel; 

// Used when position the.; carets 

struct ( fi hort indexO; 

unsigned snocu ^ n . 
unsigned short indexl, 

} caret; 

// used when assigning a jingle byte 

StrUC unsigned short ilndex; 

char cOldByte; 
) assign; 



> data; 



) ; 



#def ine UNDOBUFFER_INCREMENT 
tSe^rUHDOBUFFER.MINSIZE 

fdefine MAX_FONT_LEHGTH 
llzl tor a font face name 
idefine PRIVATE.KEYSTATE 

fdef ine MAX_TEXT 
Jdefine KAX_TEXT_EDIT 
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256 // increase buffer 

UNDOBUFFER_INCREMENT 

256 // « ax 



(65536 * 4) 
(MAX_TEXT - 1000) 
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f define WRAP_FIRSTLINE 
{define WRAP.LASTLINE 
{define WRAP.UNDEFINED 



MAX TEXT 
-1 ~ 



BOOL IsChar( char c) ; 
BOOL IsToken( char c) I 

Sol LineDelimiter( char c) , 
^ ParaDeli»iter( char 

BOOL ParaFor»atting( char c) , 
BOOL isFor»atToken( chare); 



extern 
extern 
extern 
extern 
extern 

extern 

extern 

extern 

extern 

extern 

extern 

extern 

extern 

extern 

extern int m[]» 
extern int d [ ] ; 

class CTextStyle; 

// Class CDrawText 
////////////""" 



c) 



BOOL isFor»atToken( cnar c; , 
£££ isNonNor*alizeTo)cen( char 
£££ iIordered( Int : iType) , 
BOOL IsOnordered( int iTyp|)^ bForward) ; 
Int Tokens ize( int toicen, 
int iT2clipbordFormat: ; 
int iRTFclipboardFormat, 




//class CTextHTMLGenerator; 
class CDrawText : public CDrawRect 

friend class CTextHTMLGenerator; 



P cnlr *» text; 

- m nText; 
bSelictAnchor; 

Sele nia?ic Sin9 cKrtng5rray **FontFaceArray 

list 



// Axe we currently 

// Font face 



private: 
int 

CPoint 
CPoint 
int 

until second clicK 



m needsWrap; 
nTLeftMargin; 
nTRightMargin? 
m clickCount; 



*m_oldCFont; 
m_CFont ; 



CFont 

nTiWrapldx2 ; 
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//dont start edit mode 
//Active font, setup 
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///»axi»um allocated text - 

int njnaxText ; 

int m_insertlndex ; 

int » haveCaretAndHeight; 

int nTicaretWidth; 
CRgn *m_pRgnCaret; //marked block 

BOOL m_setMouseXPos ; 

:S5S SSSSS^iv 3 ^™-' " *° ntains - oose " ar * ea 

selection while nouse is still aovn override that we must 

static BOOL »_ bMDr ^Override, // select 

NOT do word extension in single cii« 

Linelnfostruct * *_line!nfo; // ^Ig 1 ??^^^ abG ve 
int m_nLines; " max no lines 

int m_maxLines? 

int m_hMarg; 
int m_vMarg; 

static ciextstyle ...pTaxtProp; //property 

at start of data 

FindReplaceData 

♦mJFindReplace ; 

//Is the control 
BOOL ^Transparent, // 

transparent //I s the text size 

BOOL m_LocKedSize; : . // 

locked . // The locked size 

CSize m _sizeLockSxze; // Edit mode flags 

UiKT m_EditMode ; 

COIORMF ^BackCroundColor; // Background color when not 
transparent 

char *m_pUndo; // Undo record of under buf fer 

int m_nUndoLen ? 

// Hext location in undo 
int m_iUndo ; ' ' 

buffer ^ y/ wheater to record or not in 

BOOL bRecordUndo; // vneaier 

:: Insert and :: Delete 
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//cursor/block location, 

CaretStruct »- care * Q 2 i; r icing 
if postions are the same, no marking 

ExtFontAttrib // Settings set 

while gettextsegment traverses text 

ExtFontAttrib B _ oldFontSet; // Compare copy for 

selectFont 

//true height of text, 
int ajrrueHeight, ked is true 

different than size when a.LocKea x 

private: _ F m Te xtColor? 

static COLOKREF „- Te xtL.ihkColor ; 
static COIiORREF m_TextL.in*. 

Pr ° te SES?^E_SERlAL(CDrawText) ; 

CDrawText-O ; 

PUbU °iDr.«.rt(oon.t CRec« position) : 

"SE&S^IU S«i.li«(CArchlv. «r), 
virtuai voij "™^pS!S2;ou^.Snview.BOOX. 

. ^^.XSS^^SSfBoSSoutSin. - TRUE) 
//property eheet support t 

'vtrtu'i 3JS ^S'nSnir^Sr KLpCnt. OXHT nriaos, 
virtual void KeyDown (UINT ncnar, 

virtual void charcownC^m OI1 « "™ 

""^v'irtuai voi= UIOT " RePCnt ' UI,,T 

nFlags) ; 

;i?5S -ia In^r^view -pView, ; 

virt »al void on^uttonOown^youtViev* pView, UINT nFlags 
COnS %?r?ua?vo!a n onLButtonU P (C L ayoutView* P View, UINT nFlags, 
COnS %?r?ua"vo?o n oniouseMove(CLayoutyiew* pView, UINT nFlags, 
const C^^Ptj^LButtonDblClktCLayoutView* pView, UINT 
nFlags, const CPoint* point); 
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virtual void SavcOndo(CXr chive. ar,PROPERTY_TYPE,CU.youtViev 
'^'"virtual void lx>adUndo(CArchive* ar , PROPERTY_TYPE , CLayoutV iew 
*pView) ; 

virtual void nSynchronizeAssetNuibersO ; 

BOOL virtual FindReplace< frOpcrations frO P , void * P Data) ; 

SiS ^^^^^^^ — ™ 

virtual void SctFocus( void); 
virtual void KillFocus( void); 

void GetText(char ** data, int * nData) ; 
void SetText(char * data, int nData) , 

void SetAsciiText(char * ? String, BOOL bKee P For*at) , 

char *GetAsciiText( void); 

void B GcnerateHTML(CPDBuffer* theBuf fer) ; 

void Getront(ExtFontAttrib «s, int iCaretldx = -2); 

void SetFont(TokenType8 t type), 

Si! KS^WU^W 

void SetFontF.ee ( char .pFontFece) . 

void setBulletListf cco^Box .pComboBox, ExtFontAttrib* 
£S>! int FindFontInde*< char .pFontF.e.) : 

tutu -id jsssjssssrysssii. ^— «.>. 

Told 1%SGS\3S3L. SSK-ki,. «, char lTo*e„. 
CH " "iHUSLf SSS^"l5.SVeStrln„ .TO!,. BOOI. oAddspacs 

// Java event access functions.. 
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// External access methods 
COLOWREF G«tBackColor( void); 
void SetBackColor< COLORREF c) ; 
BOOL GetTransparent ( void); 
void SetTransparent( BOOL t) ; 
BOOL GetLockedSize ( void); 
void setLockedSize( BOOL is); 



int 

f Flags ; ) ; 



static void GetMinRect (CRectfi) ; 
int GetTrueHeight() ; 

^^vold CalcFontSizes( PITCHTYPE pt. int * P FontSizes) , 
virtual BOOL HasFont ( ) (return TRUE; } 
BOOL CreateFont( CFonti font ExtFontAttriW fs) . 
void InitSelectFont( CDC * P DC); 
BOOL SelectFont(ExtFontAttrib& fs, CDC *pDC) , 
void AsciiSelectAll ( void) ; 

void MouseSelectWord(CLayoutView* pView, UINT nFlags, const 
CPOin V oid 0 M;uUselectParagraph(CL a youtView* pView, UINT nFlags, 

COnSt v"d i S P da?eSrU S ( CLayoutView * P View) ; 
BOOL isEmptyO; 

char NextChar(int& iStart) ; ' _ 

char PrevChar(int& iStart) ; , . . 

iooi, rindStream( intt index, xn£. where) , 

52S Gi?FonLvtlndcx(ExtFontXttrlh «s, xnt index); 

int GetParaFonnat( int f Line )»* .^ . M int i Level ^ ; 
int FindFirstLineAtLevel 1^ >Line. J^^eve 1) . 
v«i d RevraoLevelAtLine ( xnt iLine , int xi-evex j , 
vSw 5ppT?ButIetToParagra P hLevel( int iLine, int 

bRem ° V olnpp^tyie( CString * P sStyle, BOOL bRemoveFor»atting) 
t* c.fcimieTvoef char ♦tokenl, char *token2 , int 

v^id^^ S er^fin?^xndL! n coU Char * data, int nData) ; 
void lnsert(int ilndex, char token) ; 
void Delete (int nData) ; 
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void „elT.^,int l"t 1— »• "» " " 

TO0E, ioid EM ur.O M .for ? .l.t«( ijtl KM. In" 

SfiSSSKllJiS^ ch.r .pText, mt imdex!. tat 

ilndex2, int iLen) ; ; ; 

PUbli ^id Delete ( int index, int count) ; 
PriVa £k SkipJunk( int* index, BOOL bForvard) ; 

„ „ ic int nL, int iStart, int 

void updatecaret(char token, xnt iC f 

nChars, CPoint gpos. SS-iSnT CLayoutViev* pView) ; 

void FreeSelectRegion( void), 
void mvertselectRegxon( CDC *pow 

CRgn *GetSelectRegion< void); 

void Up dat«arking< JV^^i^ipViiv - OTIi) i 
void OpdateTextOtoect( CLayoutView y 

int FindMatchToken< char token, int. isize, int istart, int 

iEnd) Int CompressTokenst int idg, int * P iNewEnd) ; 

int NormalizeStream< int idxl, in 
void normalize* xnt idxl, int icxx , , 
void Normalize ( void); £1 
void mitFontset( ExtFontAttribi fs) ; 

void lnitFontSettings( void) , a „ FMj se) ; 

void lnitFindToken( gg^S^S.xt = NULL, int *xTe* 
int FindToken( xntt J-Start, 
= NULL, int iLineBreak - 0) ; 
BOOL FindText(int where) 
void Realloc( int reqSxze), 

/ / Wrap functions 

void AllWrapped( voxd) , p , raIdx) , 
void RevrapParagrapM in * ^"S) ; 

ioid ssrsy^/jsrii* * pDCin - BU "' ,, 

void SkipLineDelxmiter( xnt* j-o , 

void SkipRTFO; _ . CPoint p2 ); 

void SelectText( CPoint P*' ; . . 
void PositionIndex( xnt& index) , 
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void PositionCaret( int idx) ? 
void PositionCarets( void); 

^TOiSS»(S«iS5 P vUw, COC -POC, C*ect 
* pDra vo lf Display (CI*youtViev* pViev, CDC * P DC, CKect 
* PDra ^fDisplayText(CDC * P DC, BOOL extentOnly, BOOL dravItAll) 

void Conmonlnitialization() ; 

int EnsureCorrectForCopy( in" itol, i nt& .^ 2 >J. . 
void EnsureCorrectstartKarking( int& si, intt ei) , 
int GetSelection( ints si, int& ei) ; 
int InsertColorSize( FontAttribfi fa i» 

^^^^.rsasisib'su. int m ««. 

^"^Jn^CoiplelsSSS; char * P ToK*h^ int l.n f int idxl, int 
idx2 , BOOL bUpdateCaret) ; 

void CompressTNULLs ( voxd) ; fc . 

void InvalidateLine( int iLxne) ; 

SS5 ^^"fnin-y^'iew .pviev. BOO, - 

TRUE) ; ■ ' 

// Undo buffer functions 
void InitUndo( void) ; 

void AllocUndo( * nt ** eede *J^ iInt i int ilnt2 , void 

void RecordUndo( UndoOp opcode, mt ilntl, int xxn 

*pBytes = NULL) ; 

void FreeUndo( void); 
void EmptyUndo( void); 
void MarkUndo( void) ; 
void Undo( void); 
void RecordCarets ( void); 

void RecordRewrapAll( void) ; cNewValue) ; 

vota ^S^^'^^^ SUytes.^r 

* PDat void SetT NULLundoable< int ilndex, int jHoBytes^ 

void KoveTokensUndoable< int iDest, int iSrc, int iSize) . 
void onPreUndo(void *pObj); 

PrlVa V oid MoveDelete( int iKind) ; , 
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BOOL FindMatch( BOOL bcasesennitive, int iStart, int iLen, 
LPCSTR pTarget, int iiNext) ; 
BOOL Find( void) ; 

nlS?!S^p"U(CLaycutVU« .pView. troperaticns trop. 

int& iReplace) ; 

protected: 

//{{AFX MSG(CDrawText) 
afx msg void OnTextProperty ( ) ; 
afx"msg void OnEditCut(); 
afx~msg void onEditCopyO ? 
afx'msg void OnEditPaste ( ) ; 
afx~"msg void OnEditSelectAll () ; 
afx"msg void OnEditClear() ? 
afx~msg void OnToolsPromote() ; ^ r 
afx~msg void OnToolsDemote() ; 
afx~msg void OnToolsWordCount () ; 
afx~msg void OnToolsInsertSymbol () ; 

SttfilS void OnUpdateEditCut(CCmdUI* PC»dUI)» 
afx"mK void OnUpdatcEditCopy(CCmdUI* PCndUI) 
Ifi-mll void OnUpdateEditPaste(CCmdUI* pCmdUI) ; 
afx-JII void onUpdateEditSelectAlKCCmdUI* pCmdUI) ; 
afxw void SSupdateEditClearCCCmdUI* pCmdUI) ; 
afJ-SII void OnStylcChanged(void * P Ob D ) ; 
afx~msg void OnRecalc(void *pObj) ; 
afx>sg void OnInitialUpdate(void *pOb3) . 

//} }AFX_MSG 
DECLARE_MESSAGE_MAP ( ) 

) ? 

//♦define COLOR_LINK RGB (0,0, 255) 

//♦define COLOR_RAWHTKL RGB(255, 0, 0) 
fendif 
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WHAT IS CLAIMED IS: 

1. A method of allowing a user to define a World Wide Web page 
comprising the steps, performed by a data processing system, of: 

displaying a plurality of page display elements on a display device, 
the display elements forming a page layout on the display device; 

receiving an indication that the user wants to add a new display 
element to the page at a first position on the page; 

adding a new draw data structure in a memory of the data 
processing system for the new display element to a plurality of other draw data 
structures, the draw data structures corresponding to the plurality of page display 
e | emen ts ( where the new draw data structure includes data representing the first 
position; and 

generating HTML that substantially reflects the displayed page 
layout on a pixel by pixel basis in accordance with the draw data structures. 

-2. A method of allowing a user to define a World Wide Web page 
comprising the steps, performed by a data processing system, of: 

displaying a plurality of page display elements on a display device, 
the display elements forming a page layout on the display device; 

receiving an indication that the user wants to add a new display 
element to the page at a first position on the page; 

adding a new draw data structure in a memory of the data 
processing system for the new display element to a plurality of other draw data 
structures, the draw data structures corresponding to the plurality of page display 
elements, where the new draw data structure includes data representing the first 
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position; and 

generating an HTML table that substantially reflects the displayed 
page layout on a pixel by pixel basis in accordance with the draw data structures. 

3. The method of claim 1, where the page display elements displayed on 
the display device are created via a tools menu displayed on the display screen. 

4. The method of claim 1, where the page display elements displayed on 
the display device include at least one of the group drawn images, audio, and 
video display elements. 

5. The method of claim 1 . where the page display elements displayed on 
the display device represents a plug-in. 

6. The method of claim 1 , where the page display elements displayed on 
the display device include at least one of the group: form, datalist. and datafield 
display elements. 

7. The method of claim 1 . further comprising the step of creating a page 
layout on the display device and a corresponding plurality of draw objects in the 
memory, where the page layout includes a header, a body, and a footer. 



8. The method of claim 7, where the header includes a banner and a 
plurality of navigator buttons. 
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9. The method of claim 7, where the footer includes a plurality of text 

buttons. 

10. The method of claim 1, wherein the HTML generating step is 
performed in response to the user activating a PREVIEW button on the display. 



in 



11. The method of claim 1 . wherein the generating step is performed i 
response to the user activating a PUBLISH button on the display. 



12. The method of claim 1. further comprising the step of creating a page 
layout on the display device and a corresponding plurality of draw objects in the 
memory, where the page layout includes at least one of a header and a footer, the 
size of which can be adjusted by the user. 

13. The method of claim 1, wherein the step of receiving an indication that 
the user wants to add a new display element to the page at a first position on the 

page includes a step of: 

receiving an indication that the user has indicated a drawing tool on 

a tools menu on the display device. 

14. The method of claim 1 . wherein the step of generating HTML includes 
the steps of: 

creating HTML for the page header; 
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creating HTML for the page body; and 
creating HTML for the page footer. 

15. The method of claim 14, further comprising the step of: 

creating initial HTML for the page. 

16. The method of claim 14, further comprising the step of: 

creating final HTML for the page. 

17. The method of claim 1, wherein the generating step includes the step 
of generating HTML for a normal page. 

18. The method of claim 1, wherein the generating step includes the step 
of generating HTML for a plurality of stacked pages. 

19. The method of claim 1 , wherein the generating step includes the step 
of generating an HTML table, which includes the substeps of: 

finding row edges of display elements on the page; 

finding column edges of display elements on the page; 

creating a matrix in a memory of the data processing system, where 
the matrix cells point to the draw data structure's; 

finding the height and width of each column in the matrix; and 

generating the HTML table in accordance with the height and width 
of each column in the matrix and the draw data structures. 
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20. The method of claim 1, wherein the generating step includes the steps 

of: 

generating a matrix representing the size and layout of the display 

elements; and 

generating an HTML table in accordance with the matrix. 

21. The method of claim 1, further including the steps of: 

viewing the HTML via a web browser, where the page displayed by 
the browser corresponds to the displayed page layout on a pixel by pixel 
basis. 

22. The method of claim 1, further including the steps of: 

receiving input by the user indicating a page style definition; and 
wherein the generating step includes the step of generating HTML 

in accordance with the page style input by the user. 

j ; • ■ ci r ' 

23. The method of claim 1, further including the steps of: 

allowing the user to specify a hotspot on the display layout; and 
allowing the user to specify an address associated with the hotspot, 
wherein the generating step includes the step of generating an 

HTML link in accordance with a location of the hotspot on the display layout and 

the address. 

24. The method of claim 1 , further including the steps of: 

allowing the user to specify 3 link location on the display layout; and 
allowing the user to specify another page associated with the link; 
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wherein the generating step includes the step of generating an 
HTML in accordance with a location of the link on the lease layout and with the 
page specified by the user. 

25. The method of claim 1 , further comprising the steps of: 

allowing the user to specify a link type that is one of a structural link, 

an internal link, or an external link; and 

allowing the user to specify a link location, 

wherein the generating step includes the step of generating an 

HTML link in accordance with the link type .and location. 

26. An apparatus allowing a user to define a World Wide Web page, 
comprising: 

a memory; 

a portion configured to display a plurality of page display elements 
on a display device, the display elements forming a page layout on the display 
device; 

a portion configured to receive an indication that the user wants to 
add a new display element to the page at a first position on the page; 

a portion configured to add a new draw data structure in the memory 
for the new display element to a plurality of other draw data structures, the draw 
data structures corresponding to the plurality of page display elements, where the 
new draw data structure includes data representing the first position; and 

a portion configured to generate HTML that substantially reflects the 
displayed page layout on a pixel by pixel basis in accordance with the draw data 

Hi X. 

structures. 



65 



,„„ 0 PCT/US97/12817 

WO 98/04978 

27. A computer program product, comprising: 
a computer usable medium having computer readable code embodied 
therein for allowing a user to define a World Wide Web page, the computer 

program product comprising: 

computer readable program code devices configured to cause a 
computer to effect displaying a plurality of page display elements on a display 
device, the display elements forming a page layout on the display device; 

computer readable program code devices configured to cause a 
computer to effect receiving an indication that the user wants to add a new display 
element to the page at a first position on the page- 
computer readable program code devices configured to cause a 
computer to effect adding a new draw data structure in the memory for the new 
display element to a plurality of other draw data structures, the draw data 
structures corresponding to the plurality of page display elements, where the new 
draw data structure includes data representing the first position; and 

computer readable program code devices configured to cause a 
computer to effect generating HTML that substantially reflects the displayed page 
layout on a pixel by pixel basis in accordance with the draw data structures.- 
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(Build HTML for Page) 
Fig. 19 
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2002 



2004 



2006 



"1 



2008 



2010 



Create initial HTML for the page 



Create an HTML table for the page header 



Create an HTML table the page body 



1 


r i 


Create an HTML table for the page footer 


1 


[ 1 



Create final HTML for the page 



Build a 
Normal Page 
Fig. 20 
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VV ^ j^ Loop for each data page in stacked page 



2102 



2104 



1 




Create initial HTML for the page 



2106 



2108 
2110 



Create an HTML table for the page header 



Create an HTML table for the page body 



Create an HTML table for the page footer 



Create final HTML for the page 



2111 




End of loop for each data object in 
stacked page 



Build a 
Stacked Page 
Fig. 21 
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2202 



2212 



2214 



<HTML> 
<HEAD> 

<TITLE> title </T!TLE> 

<META NAME=at/f/)OA> 

<! Layout script/ comments follow comments> 

</HEAD> 




<BODY BGCOLOR = rgb for background color* 



2208 



2210 






| <BODY BACKGROUND = 


= background image file> J 








l-l- ; ■ 1 


i Get style for page includes regular, visited, active link colors 


1 1 , 


S Write HTML for regular, 


visited, active link colors 



Create initial 
HTML 
Fig. 22 
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2302 



Get layout data for header, footer, or body (depending on 
which the table is for) 



2304 



Find unique row edges of elements on page (eliminate 
duplicates) 



2306 



Find unique column edges of elements on page 
(eliminate duplicates) 



2308 



Create matrix having (row edges + 1) rows and (col 
sdges + 1) columns. Matrix cells points to draw objects. 



2310 



Find height of each row and width of each column in the 
matrix and save 



2312 



^ Create HTML for table in accordance with matrix 

I =f— 



Build an HTML Table 
Fig. 23 ; 
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2402 



2404 



<TABLE BORDER=0 CELLPADDING=0 
CELLSPACING=0> . 



Generate HTML table header (has column and 
width definitions for HTML table) 



2406 



I 



( / fori = 1 to # rows 
in matrix 



2408 



2410 



Generate HTML for 
new row; Some 
cells can span 
several rows 



<TR ...> 



— for j = 1 to# / 
columns in matrix 



2412 



Generate HTML for nex\. 
cell in row. Some cells 
can span several rows 

and/or several columns. 

Consider font, size, type 
of data (image, text...) 

(Check flags for text only, 

greyscale, low resolution) 



2414 



2416 




end loop j 



2418 



2420 



<fTR> 
•(Indicate height of 
row in pixels) 



end loop i 





r ■ i 


</TABLE> - V-'. : ' 

: • ' V ' 1 



<TD COLSPAN = val> 
<fTD> 



Generation of HTML for an HTML table in 

accordance with matrix FIG. 24 
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<p> <a HREF = netobjects homepge URL> 
<IMG SRC=link image\ BORDER=0> 
</A> 
</P> 

</BODY> 
</HTML> 



Generate final 
HTML 
Fig. 25 



SUBSTTTUTE SHEET (RULE 26) 



WO 98/04978 



PCT/US97/12817 



29/43 



Object # 
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FIG. 26 
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Object* Start Start + Length 

-I 10 100 

2 
3 
4 



30 40 
60 75 
30 40 



Object # Start Start + Height 

•j 80 95 

2 * " 20 25 

3 10 70 

4 65 70 



Sort and remove 
duplicates 



Column Edges 

10 ~~ 
30 
40 
60 

75 

100 



\- column 
f edges 



n Sort and remove 
«H duplicates 



Row Edges 
10 



1 



20 

25 

65 

70 

80 

95 



7 row 
edges 



Determine width 
of each column 



column widths 



1 



PI Determine height 
^ 7 of each row 

row heights 



Fig. 27 
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Fig. 28 
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column 
widths 



2802 



Fig. 29 

























Occuptod 










Occupied 




Occuptsd 














Occupmd 










Occupmd 


























Oecupwd 




Occupied 


Occupied 


Occupied 
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HTML Table ■ 
(8 rows, 7 cols) 



Row 
heights 
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External Link (Tab) 



Name 



-OS 



ClipSites 




Get URL 








ClipSites . 1 



j Unlink | j Link \ \ Cancel 



Structural Link (Tab) 




AM 




Link Types 




■i 




Home 
Up 

Next Sibling 
Previous Sibling 
Next Stacked page 




H 












1 L "* 1 1 


Cancel | 



Internal Link (Tab) 



O Begins With 



O Combines 



O Ends With 



| Find \ \ Link | | Cancel \ 



Internal Link Results 



Link To 



Clement's Page 
Clemenl Biography 
A word from Clemenl 
All about Clement 
Clement's Column 



j Link \ | Cancel \ 



y FIG. 32 
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3302 




3304 




3314 




3318 





3316 




Generate HTML for 
internal fink 



3318 




Generate HTML for 
external link 




Find home node7 
page object: 
Generate HTML for 

link to home 
(button name and 
URL) 



Find parent node/ 

page object; 
Generate HTML for 

link to parent 
(button name and 
URL) 



Find Child node/page 
object; Generate HTML 

for link to parent 
(button name and URL) 



Find Child node/ 
page object; 
Generate HTML for 
link to next/prev 
sibling (button 
name and URL) 



FIG. 33 
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3408 



3414 



The Object Definition Dialog Box 
FIG. 34 
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FIG. 35 




FIG. 37 
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Parent page 



Bikes' 



Stacked data 
pages 



1902 



For Sale 



FIG. 36 
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